<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>

<html>
    <head>
        <title>EPCS Calendar</title>
		<link href="css/bootstrap.css" rel="stylesheet" media="screen">
		<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
		<link href="css/ace.min.css" rel="stylesheet" media="screen">
		<link href="css/font-awesome.min.css" rel="stylesheet"/>
		<link href="css/jquery.tagsinput.css" rel="stylesheet"/>
		<link href="css/trung-style.css" rel="stylesheet" media="screen">
		<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
		<link href="css/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="all"/>
		
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery-1.9.0.min.js"></script>
		<script src="js/jquery.tagsinput.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/ace.min.js"></script>
		<script src="js/moment.js"></script>
		<script src="js/daterangepicker.js"></script>
		<script src='js/jquery-ui.custom.min.js'></script>
    </head>
	<body>
		
		<div class="index">
			<!--header -->
			<tag:HeaderTag username="${user_info.fullname}">
				
				<jsp:body>
				<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
					<ul class="breadcrumb" style="margin: 8px;">
						<li>
							<i class="icon-home home-icon"></i>
							<a href="./Index.do">Trang chủ</a>
						</li>
						<li class="active">
							<a href="./ManageEvent.do">Quản lý sự kiện</a>							
						</li>
						<li class="active">
							Tất cả sự kiện
						</li>
					</ul>
					<!-- .breadcrumb -->
				</div>
				</jsp:body>
			</tag:HeaderTag>
		
			
			<!--end header -->
			
			<!-- main body -->
			<tag:SideBarTag active_area="2"></tag:SideBarTag>
			
			
			<!-- Calendar board-->
			<!--End calendar board -->
			
			
			<!--Create Event-->
			<!-- Modal -->
			<div class="main-content">
				<div class="page-header">
					<h1>Tất cả sự kiện </h1>
					<button style="margin: 35px 0 0 20px;" id="creatNewEvent"  class="btn btn-primary btn-sm" data-toggle="modal" data-target="#eventDetailModal">
					  Tạo mới
					</button>				
				</div>
				<div class="modal fade" id="eventDetailModal" data-backdrop="static"  tabindex="-1" 
						role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog">
					<div class="modal-content">
					<form action="CreateEventAtManagePage.do" id="createEventFrm" method="POST">
						<div class="modal-header" style="background-color: #62a8d1; color: white;">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">
								Thông tin sự kiện
							</h4>
						</div>
						<div class="modal-body">
							
							<font color="red">*</font>
								Tiêu đề <input type="text" name="title" id="title" placeholder="Nhập tiêu đề" style="width: 89%" value="">				
							<label class="control-label" for="reservationtime">
								<font color="red">*</font> Diễn ra cả ngày <input type="checkbox" id="isAllDay" name="isAllDay" checked>
							</label>											
							<div style="position:relative;">																	
								<div class="controls controls-row">	
									<div id="alldayPicker" style="float: right;width: 70px;">
										<button type="button" id="daterange_allday" style="margin-top: 3px;">
											Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
										</button>
									</div>
									<div id="notAlldayPicker" style="float: right;width: 70px; display:none;" >
										<button type="button" id="daterange"style="margin-top: 3px;">
											Chọn <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
										</button>
									</div>
									<div class="controls">						   		
										<input type="hidden" name="daterange_start" id="daterange_start" value="">
										<font color="red">*</font>
										Từ <input type="text" id="daterange_start_show" readonly style="width: 200px">
										<input type="hidden" name="daterange_end" id="daterange_end" value="">
										Đến <input type="text" id="daterange_end_show" style="width: 200px" readonly>		
									</div>
								</div>
								<div style="margin-top: 8px;">
								Phân loại:
								<select name="eventCat" style="width: 100%;">
									<s:set var="catList" value="%{#request.CATEGORY_LIST}"></s:set>
									<s:iterator var="cat_iter" value="%{#catList}" >							
									<option value="${cat_iter.eventCategoryId}">${cat_iter.eventCategoryName}</option>							
									</s:iterator>
								</select>
								</div>
								Địa điểm <input type="text" class="form-control" name="location" id="location" placeholder="Nhập địa điểm">
								Mô tả <textarea class="form-control" rows="2" name="description" id="description"></textarea>
								<div>
									Mời tham gia <input type="text" name="invitedPerson" id="invitedPerson" value="">
									<input type="text" style="display: none" name="invitedUsername" id="invitedUsername" value=""  />
								</div>	
								Nhắc nhở trước
								<div class="input-group">
								  <input type="number"  name="reminder" id="reminder" placeholder="Nhập thời gian" value="15" 
								  			class="form-control" min="15" max="180">
								  <span class="input-group-addon">Phút</span>
								</div>					
								<font color="red">*</font>Trạng thái : 
								<input style="margin-left:20px" type="radio" name="visibility" value="public"> Công khai
								<input style="margin-left:20px" name="visibility" type="radio" checked="checked" value="private"> Riêng tư <br/>					
							</div>
							<font color="red" style="position: absolute;left: 0;margin-left: 20px;bottom: 0;font-size: 10;">(*) Bắt buộc</font>
						</div>
						
						<div class="modal-footer">					
							<button type="button" onclick="submitForm();" class="btn btn-primary">Tạo mới</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">Hủy</button>
						</div>
						</form>
					</div><!-- /.modal-content -->
				  </div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				<!--End Create Event-->
			
			
				<!--Event Tab -->
				<div class="tab-event" >
					<ul class="nav nav-tabs">
					  <li class="active"><a href="#event-working" data-toggle="tab">Đang diễn ra</a></li>
					  <li><a href="#event-next" data-toggle="tab">Sắp diễn ra</a></li>
					  <li><a href="#follow-event" data-toggle="tab">Đang theo dõi</a></li>
					  <li><a href="#closed-event" data-toggle="tab">Kết thúc</a></li>
					</ul>
	
					<!-- Tab panes -->
					<div class="tab-content" style="width: 800px;">
						<!-- Tab Event Today -->
						<div class="tab-pane active" id="event-working">
							<div class="row">
								<div class="col-xs-12">
									<div class="table-responsive">
										<table id="sample-table-1" class="table table-hover middleTd table-striped">
											<thead>
												<tr>
													<th>Tên sự kiện</th>
													<th>Thời gian diễn ra còn lại</th>
													<th></th>
												</tr>
											</thead>
	
											<tbody id="tbody_1">
												<s:set var="working_event_list" value="%{#request.WORKING_EVENT_LIST}"></s:set>
												<s:if test="%{#working_event_list != null}">
													<s:if test="%{#working_event_list.isEmpty() == false}">
													<s:iterator var="working_event_iter" value="%{#working_event_list}" status="count">
													
												
													<s:if test="%{#working_event_iter.organizer == null}">
															<tr id="working_event_${working_event_iter.eventId}">
														</s:if>
														<s:else>
															<tr id="working_event_${working_event_iter.originalEvent.eventId}">
														</s:else>
														<td>
														<s:if test="%{#working_event_iter.organizer == null}">
														<a href="PublicEventDetail.do?id=${working_event_iter.eventId} " >
															 	<s:property value="%{#working_event_iter.title}"/>
															</a>
														</s:if>
														<s:else>
														<a href="PublicEventDetail.do?id=${working_event_iter.originalEvent.eventId}" >
															 	<s:property value="%{#working_event_iter.title}"/>
															</a>
														</s:else>
															
														</td>
														<td>${working_event_iter.endTime}</td>	
														<td colspan="2">	
															<s:if test="%{#working_event_iter.organizer != null}">
																<button class="btn btn-danger btn-sm buttonForm"
																onclick="changeFollowingForManagement('${working_event_iter.originalEvent.eventId}', this,'working')">
																Hủy theo dõi
																</button>
															</s:if>
														</td>																																							
													</tr>
													</s:iterator>
													</s:if>
													<s:else>
														<tr>
															<td colspan="3">Hiện vẫn chưa có sự kiện nào!</td>	
														</tr>	
													</s:else>
												</s:if>
												<s:else>
													<tr>
														<td colspan="2">Hiện vẫn chưa có sự kiện nào!</td>	
													</tr>	
												</s:else>
											</tbody>
											
										</table>
									</div><!-- /.table-responsive -->
								</div><!-- /span -->
							</div>
						</div><!-- End Tab Event Today -->
						
						<!-- Tab Event Next -->
						<div class="tab-pane " id="event-next">
							<div class="row">
								<div class="col-xs-12">
									<div class="table-responsive">
										<table id="sample-table-1" class="table table-striped table-hover middleTd">
											<thead>
												<tr>
													<th>Tên sự kiện</th>
													<th>Thời gian bắt đầu</th>
													<th>Thời gian kết thúc</th>
													<th></th>
												</tr>
											</thead>
	
											<tbody id="tbody_2">
												<s:set var="future_event_list" value="%{#request.FUTURE_EVENT_LIST}"></s:set>
												<s:if test="%{#future_event_list != null}">
													<s:if test="%{#future_event_list.isEmpty() == false}">
													<s:iterator var="future_event_iter" value="%{#future_event_list}" status="count">
													<s:if test="%{#future_event_iter.organizer == null}">
															<tr id="future_event_${future_event_iter.eventId}">
														</s:if>
														<s:else>
														<tr id="future_event_${future_event_iter.originalEvent.eventId}">	
														</s:else>
													
														<td style="width:295px;">
														<s:if test="%{#future_event_iter.organizer == null}">
														<a href="PublicEventDetail.do?id=${future_event_iter.eventId} " >
															 	<s:property value="%{#future_event_iter.title}"/>
															 </a>
														</s:if>
														<s:else>
														<a href="PublicEventDetail.do?id=${future_event_iter.originalEvent.eventId} " >
															 	<s:property value="%{#future_event_iter.title}"/>
															 </a>
														</s:else>
															
														</td>
														<td>
															<fmt:parseDate value="${future_event_iter.startTime}" 
																pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start"/>
															<s:if test="%{#future_event_iter.isAllDayEvent}">
																<fmt:formatDate value="${start}" pattern="'Sáng' dd/MM/yyyy" />
															</s:if>
															<s:else>
																<fmt:formatDate value="${start}" 
																pattern="HH:mm, dd/MM/yyyy" />
															</s:else>
														</td>
														<td>
															<fmt:parseDate value="${future_event_iter.endTime}" 
																pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>
															<s:if test="%{#future_event_iter.isAllDayEvent}">
																<fmt:formatDate value="${end}" pattern="'Chiều' dd/MM/yyyy" />
															</s:if>
															<s:else>
																<fmt:formatDate value="${end}" 
																pattern="HH:mm, dd/MM/yyyy" />
															</s:else>
														</td>
														<td colspan="2">		
															<s:if test="%{#future_event_iter.organizer == null}">												
															<form method="post" action="EventDetail.do" class="buttonForm">
																<input type="hidden" value="${future_event_iter.eventId}" name="id"/>
																<button class="btn btn-warning btn-sm">Sửa</button>
															</form>
															<button class="btn btn-danger btn-sm buttonForm" 
																onclick="cancelEvent('${future_event_iter.eventId}', this, 'coming')">
																	Đóng
															</button>
															</s:if>	
															<s:else>
																<button class="btn btn-danger btn-sm buttonForm"
																	onclick="changeFollowingForManagement('${future_event_iter.originalEvent.eventId}', this,'comming')">
																 	Hủy theo dõi
																</button>
															</s:else>
														</td>												
													</tr>													
													</s:iterator>
													</s:if>
													<s:else>
														<tr>
															<td colspan="4">Hiện vẫn chưa có sự kiện nào!</td>	
														</tr>	
													</s:else>
												</s:if>
												<s:else>
													<tr>
														<td colspan="4">Hiện vẫn chưa có sự kiện nào!</td>	
													</tr>	
												</s:else>
											</tbody>
										</table>
									</div>
									<!-- /.table-responsive -->
								</div><!-- /span -->
							</div>
						</div><!-- Tab Event Next -->
						
						<!-- Tab Follow Event -->
						<div class="tab-pane" id="follow-event">
							<div class="row">
								<div class="col-xs-12">
									<div class="table-responsive">
										<table id="sample-table-1" class="table table-striped table-hover middleTd">
											<thead>
												<tr>
													<th>Tên sự kiện</th>
													<th>Thời gian bắt đầu</th>
													<th>Thời gian kết thúc</th>
													<th></th>
												</tr>
											</thead>
						
											<tbody id="tbody_3">
												<s:set var="follow_event_list" value="%{#request.FOLLOW_EVENT_LIST}"></s:set>
												<s:if test="%{#follow_event_list != null}">
													<s:if test="%{#follow_event_list.isEmpty() == false}">
													<s:iterator var="follow_event_iter" value="%{#follow_event_list}" status="count">
													<s:if test="%{#follow_event_iter.organizer == null}">
															<tr id="follow_event_${follow_event_iter.eventId}">
														</s:if>
														<s:else>
															<tr id="follow_event_${follow_event_iter.originalEvent.eventId}">
														</s:else>
												
														<td style="width:295px;">
															<s:if test="%{#follow_event_iter.organizer == null}">
															<a href="PublicEventDetail.do?id=${follow_event_iter.eventId} " >
															 	<s:property value="%{#follow_event_iter.title}"/>
															 </a>
															</s:if>
															<s:else>
															<a href="PublicEventDetail.do?id=${follow_event_iter.originalEvent.eventId} " >
															 	<s:property value="%{#follow_event_iter.title}"/>
															 </a>
															</s:else>
														</td>
														<td>
															<fmt:parseDate value="${follow_event_iter.startTime}" 
																pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start"/>
															<s:if test="%{#follow_event_iter.isAllDayEvent}">
																<fmt:formatDate value="${start}" pattern="'Sáng' dd/MM/yyyy" />
															</s:if>
															<s:else>
																<fmt:formatDate value="${start}" 
																pattern="HH:mm, dd/MM/yyyy" />
															</s:else>
														</td>
														<td>
															<fmt:parseDate value="${follow_event_iter.endTime}" 
																pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>
															<s:if test="%{#follow_event_iter.isAllDayEvent}">
																<fmt:formatDate value="${end}" pattern="'Chiều' dd/MM/yyyy" />
															</s:if>
															<s:else>
																<fmt:formatDate value="${end}" 
																pattern="HH:mm, dd/MM/yyyy" />
															</s:else>
														</td>
														<td colspan="2">	
															<button class="btn btn-danger btn-sm buttonForm"
																onclick="changeFollowingForManagement('${follow_event_iter.originalEvent.eventId}', this,'follow')">
																Hủy theo dõi
															</button>
														</td>												
													</tr>														
													</s:iterator>
													</s:if>
													<s:else>
														<tr>
															<td colspan="4">Hiện vẫn chưa có sự kiện nào!</td>	
														</tr>	
													</s:else>
												</s:if>
												<s:else>
													<tr>
														<td colspan="4">Hiện vẫn chưa có sự kiện nào!</td>	
													</tr>	
												</s:else>
											</tbody>
										</table>
									</div><!-- /.table-responsive -->
								</div><!-- /span -->
							</div>
						</div><!--End Tab Follow Event -->
						
						<!-- Tab Close Event -->
						<div class="tab-pane" id="closed-event">
							<div class="row">
								<div class="col-xs-12">
									<div class="table-responsive">
										<table id="sample-table-1" class="table table-striped table-hover middleTd">
											<thead>
												<tr>
													<th>Tên sự kiện</th>
													<th>Thời gian bắt đầu</th>
													<th>Thời gian kết thúc</th>
													<th></th>
												</tr>
											</thead>
	
											<tbody id="tbody_4">
												<s:set var="end_event_list" value="%{#request.END_EVENT_LIST}"></s:set>
												<s:if test="%{#end_event_list != null}">
													<s:if test="%{#end_event_list.isEmpty() == false}">
													<s:iterator var="end_event_iter" value="%{#end_event_list}" status="count">
													<tr id="end_event_${end_event_iter.eventId}" >
														<td style="width:295px;">
														<form method="post" action="EventDetail.do" class="buttonForm" id="endEventForm">
																<input type="hidden" value="${end_event_iter.eventId}" name="id"/>
															<a href="#" onclick="document.getElementById('endEventForm').submit()">${end_event_iter.title}</a>
															 
																
															</form>
															
														</td>
														<td>
															<fmt:parseDate value="${end_event_iter.startTime}" 
																pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="start"/>
															<s:if test="%{#end_event_iter.isAllDayEvent}">
																<fmt:formatDate value="${start}" pattern="'Sáng' dd/MM/yyyy" />
															</s:if>
															<s:else>
																<fmt:formatDate value="${start}" 
																pattern="HH:mm, dd/MM/yyyy" />
															</s:else>
														</td>
														<td>
															<fmt:parseDate value="${end_event_iter.endTime}" 
																pattern="yyyy-MM-dd'T'HH:mm:ssZ" var="end"/>
															<s:if test="%{#end_event_iter.isAllDayEvent}">
																<fmt:formatDate value="${end}" pattern="'Chiều' dd/MM/yyyy" />
															</s:if>
															<s:else>
																<fmt:formatDate value="${end}" 
																pattern="HH:mm, dd/MM/yyyy" />
															</s:else>
														</td>
														<td colspan="2">
															<button class="btn btn-danger btn-sm buttonForm"
															onclick="cancelEvent('${end_event_iter.eventId}', this, 'finished')">
															Xóa</button>
														</td>												
													</tr>														
													</s:iterator>
													</s:if>	
													<s:else>
														<tr>
															<td colspan="4">Hiện vẫn chưa có sự kiện nào!</td>	
														</tr>	
													</s:else>										
												</s:if>	
												<s:else>
													<tr>
														<td colspan="4">Hiện vẫn chưa có sự kiện nào!</td>	
													</tr>
												</s:else>										
											</tbody>
										</table>
									</div><!-- /.table-responsive -->
								</div><!-- /span -->
							</div>
						</div><!--End Tab Close Event -->
					</div>
				</div><!-- End Event Tab -->
			
			<!-- end body -->
			</div>
	
	</div>
	
	</body>
	<script>
	// type= {following, coming, finished}
	function cancelEvent(eventId, button, type){
	    // ko cho user bấm nữa
	    button.setAttribute("disabled", "disabled");
	    var finishedRow = $('#end_event_' + eventId);
	    var followingRow = $('#follow_event_' + eventId);
	    var comingRow = $('#future_event_' + eventId);
	    var workingRow = $('#working_event_' + eventId);
	    
	    $.ajax({
            url: "CancelEvent.do",
            type: "post",
            data: { id: eventId},
            success: function (data) {
            	if (data.ajaxResult != "Unauthorized"){
            	    // mở lại button cho user bấm
            		button.removeAttribute("disabled");	   
            		if (data.ajaxResult != "Fail"){
	            		// xét type
	            		if (type =='finished'){
	            			finishedRow.remove();
	            			 var tbody_4 = document.getElementById("tbody_4").innerHTML;
	  	            		    if(tbody_4.trim() == ""){
	  	            		    	document.getElementById("tbody_4").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	  	            		
	  	            		    }
	            			
	            		} else {
	            			followingRow.remove();
	            			workingRow.remove();
	            			comingRow.remove();
	            			 var tbody_1 = document.getElementById("tbody_1").innerHTML;
	  	            		    if(tbody_1.trim() == ""){
	  	            		    	document.getElementById("tbody_1").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	  	            		
	  	            		    }
	            			 var tbody_2 = document.getElementById("tbody_2").innerHTML;
	  	            			if(tbody_2.trim() == ""){
	  	            				document.getElementById("tbody_2").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	  	            		    }
	  	            			 var tbody_3 = document.getElementById("tbody_3").innerHTML;
		  	            		    if(tbody_3.trim() == ""){
		  	            		    	document.getElementById("tbody_3").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
		  	            		    } 
	            		}
            		} else {
            		    var alertStr = 'Chưa thể ';
            		    if (type =='finished') {
            				alertStr = alertStr + 'xóa sự kiện';
            		    } else if (type =='coming'){
            				alertStr = alertStr + 'đóng sự kiện';
            		    } else if (type =='following'){
            				alertStr = alertStr + 'hủy theo dõi sự kiện';
            		    }
            			alert(alertStr);
            		}
            	} else {
            		window.location.href = "Index.do";
            	}
            },
            error: function (data) {
                alert("Hệ thống tạm thời gián đoạn!");
            }
        });
	}
	</script>
<script type="text/javascript">
function submitForm(){
	//Lay cac username dc invite bo vao trong mang
	var inviteArr = $("#invitedPerson_tagsinput > span>span");
	//chay loop
	for ( var i = 0; i< inviteArr.length ; i++ ) { 
		//voi tung phan tu trong mang, lay html ra, bo '&nbsp;'
		var username = $(inviteArr[i]).html().replace(/&nbsp;/g,"");;
		document.getElementById("invitedUsername").value += username+',';
		//var invitedPersonArr = new Array();
		//invitedPersonArr[i] = username;
	} 
	//submit form
	$( "#createEventFrm" ).submit();
	
};



</script>


<script type="text/javascript">
$(document).ready(function() {
  $('#reservationtime').daterangepicker({
	timePicker: true,
	timePickerIncrement: 1,
	format: 'MM/DD/YYYY h:mm A'
  });
});

function onAddTag(tag) {
			alert("Added a tag: " + tag);
		}
		function onRemoveTag(tag) {
			alert("Removed a tag: " + tag);
		}
		
		function onChangeTag(input,tag) {
			alert("Changed a tag: " + tag);
		}
		
		$(function() {
			$('#person-invited').tagsInput({width:'auto'});

		});
</script>
<script>
function set_color(id) {
	document.getElementById('colorpicker').value=id;
}
jQuery(document).ready(function(){
		
	jQuery("#gray").click(function(){
		jQuery('#gray').addClass('icon-check');
		jQuery('#blue').removeClass('icon-check');
		jQuery('#green').removeClass('icon-check');
		jQuery('#light-blue').removeClass('icon-check');
		jQuery('#orange').removeClass('icon-check');
		jQuery('#red').removeClass('icon-check');
	});
	jQuery("#blue").click(function(){
		jQuery('#blue').addClass('icon-check');
		jQuery('#gray').removeClass('icon-check');
		jQuery('#green').removeClass('icon-check');
		jQuery('#light-blue').removeClass('icon-check');
		jQuery('#orange').removeClass('icon-check');
		jQuery('#red').removeClass('icon-check');
	});
	jQuery("#green").click(function(){
		jQuery('#green').addClass('icon-check');
		jQuery('#gray').removeClass('icon-check');
		jQuery('#blue').removeClass('icon-check');
		jQuery('#light-blue').removeClass('icon-check');
		jQuery('#orange').removeClass('icon-check');
		jQuery('#red').removeClass('icon-check');
	});
	jQuery("#light-blue").click(function(){
		jQuery('#light-blue').addClass('icon-check');
		jQuery('#gray').removeClass('icon-check');
		jQuery('#green').removeClass('icon-check');
		jQuery('#blue').removeClass('icon-check');
		jQuery('#orange').removeClass('icon-check');
		jQuery('#red').removeClass('icon-check');
	});
	jQuery("#orange").click(function(){
		jQuery('#orange').addClass('icon-check');
		jQuery('#gray').removeClass('icon-check');
		jQuery('#green').removeClass('icon-check');
		jQuery('#light-blue').removeClass('icon-check');
		jQuery('#blue').removeClass('icon-check');
		jQuery('#red').removeClass('icon-check');
	});
	jQuery("#red").click(function(){
		jQuery('#red').addClass('icon-check');
		jQuery('#gray').removeClass('icon-check');
		jQuery('#green').removeClass('icon-check');
		jQuery('#light-blue').removeClass('icon-check');
		jQuery('#orange').removeClass('icon-check');
		jQuery('#blue').removeClass('icon-check');
	});

});

</script>
<script type="text/javascript">

$(document).ready(function(){
    
    //------------- date range picker --------------------------//
	var startInput = document.getElementById('daterange_start');
	var endInput = document.getElementById('daterange_end');
	var startShow = document.getElementById('daterange_start_show');
	var endShow = document.getElementById('daterange_end_show');
	
	function getValidMoment(){
		var theMoment = moment().clone();
		theMoment.seconds(33);
		var minutes = theMoment.minutes();
		var modNumber = minutes%5;
		
		if (modNumber >0 && modNumber <3){			
			theMoment.subtract("minutes", modNumber);			
		} else if (modNumber >= 3 && modNumber <5){
			theMoment.add("minutes", 5-modNumber);
		}
		return theMoment;
	}
	
	var currentTime = getValidMoment();
	startInput.value = currentTime.format('YYYY-MM-DDT00:00:00Z');
	startShow.value = currentTime.format('DD/MM/YYYY');
	endInput.value = currentTime.format('YYYY-MM-DDT00:00:00Z');
	endShow.value = currentTime.format('DD/MM/YYYY');
	
	
	$('#daterange').daterangepicker(
	{ 
		timePicker: true,
		opens:"left",
		timePicker12Hour: true,
		showWeekNumbers: true,
		startDate:currentTime.clone().add({minutes:30}),
		endDate:currentTime.clone().add({minutes:60}),
		minDate: currentTime.clone(),
		/*maxDate: currentTime.clone().add({minutes:60}),*/
		timePickerIncrement: 5,
		format: "DD/MM/YYYY (hh:mm A)",
		separator:" đến ",
	},
		function(start, end) {
		
			//validate start time (start ko the nho hon start standard, 30 phut)
			if(start.minutes() >= currentTime.clone().add({minutes:30}).minutes()){
				/*var startInput = document.getElementById('daterange_start');
				var endInput = document.getElementById('daterange_end');*/
				startInput.value = start.format('YYYY-MM-DDTHH:mm:00Z');
				endInput.value = end.format('YYYY-MM-DDTHH:mm:00Z');
				startShow.value = start.format('DD/MM/YYYY (hh:mm A)');
				endShow.value = end.format('DD/MM/YYYY (hh:mm A)');
			}
		}
	);
	
	$('#daterange_allday').daterangepicker(
	{ 
		/*timePicker: false,
		timePicker12Hour: false,*/
		showWeekNumbers: true,
		opens:"left",
		minDate: currentTime.clone(),
		format: "DD/MM/YYYY",
		startDate: currentTime.clone(),
		separator:" đến hết ",
		endDate: currentTime.clone(),
		ranges: {
			 'Hôm nay': [currentTime.clone(), currentTime.clone()],
			 'Ngày mai': [currentTime.clone().add({days:1}), currentTime.clone().add({days:1})],
		},
	},
		function(start, end) {
			startInput.value = start.format('YYYY-MM-DDT00:00:00Z');
			endInput.value = end.clone().add("days", 1).format('YYYY-MM-DDT00:00:00Z');
			startShow.value = start.format('DD/MM/YYYY');
			endShow.value = end.clone().format('DD/MM/YYYY');
		}
	);
	
	$('#isAllDay').change(function() {
		startInput.value = "";
		endInput.value = "";
		// 
		var isAlldayEvent = $(this).is(':checked');
		if(isAlldayEvent){
			$('#alldayPicker').show();
			$('#notAlldayPicker').hide();
			setDateTime("allday")
		} else {
			$('#notAlldayPicker').show();
			$('#alldayPicker').hide();
			setDateTime("nonallday");
		}
		
	});
	
	function setDateTime(type){
		if (type == 'allday'){
			startInput.value = currentTime.clone().format('YYYY-MM-DDT00:00:00Z');
			startShow.value = currentTime.clone().format('DD/MM/YYYY');
			endInput.value = currentTime.clone().format('YYYY-MM-DDT00:00:00Z');
			endShow.value = currentTime.clone().format('DD/MM/YYYY');
		} else if (type== 'nonallday'){
			// event phai co start it nhat 30 phut sau thoi diem hien tai
			startInput.value = currentTime.clone().add({minutes:30}).format('YYYY-MM-DDTHH:mm:00Z');
			startShow.value = currentTime.clone().add({minutes:30}).format('DD/MM/YYYY (hh:mm A)');
			// event co do interval toi thieu 30 phut so voi start --> 60 phut so voi hien tai
			endInput.value = currentTime.clone().add('minutes', 60).format('YYYY-MM-DDTHH:mm:00Z');
			endShow.value = currentTime.clone().add('minutes', 60).format('DD/MM/YYYY (hh:mm A)');
		}
	}
	
	//---------- END Date range picker -----------------//

	//---------------tag Input----------------------//
	$('#invitedPerson').tagsInput({
	    /*'autocomplete_url': url_to_autocomplete_api,
	    'autocomplete': { option: value, option: value},
	    'placeholderColor' : '#666666',*/
	    'width':'auto',
	    'interactive':true,
	    'defaultText':'Thêm email',
	    'onAddTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them
			},
	    'onRemoveTag':function(value){
				// he thong tu dong add roi, nen ko can xu ly gi them	
	    	},
	    /*'onChange' : function(htmlObject){},*/
	    'removeWithBackspace' : true,
	    'minChars' : 0,
	    'maxChars' : 0, //if not provided there is no limit
	    
	 });
	
});


</script>
	<script>
		

	    // event nhấn nút theo dõi / hủy theo dõi
		function changeFollowingForManagement(eventId,button,type){
		 	// ko cho user bấm nữa
		    button.setAttribute("disabled", "disabled");
		    var followingRow = $('#follow_event_' + eventId);
		    var comingRow = $('#future_event_' + eventId);
		    var workingRow = $('#working_event_' + eventId);
		  
		
		
		    $.ajax({
	            url: "ChangeFollowingForManagement.do",
	            type: "GET",
	            data: {eventIdForManagerment: eventId},
	            success: function (data) {
	            	  button.removeAttribute("disabled");
	            	  if (data != "Unauthorized"){
	            			if(data != "cancelled"){
	            	       		if (data != "Fail"){
	    	  	            		// xét type
	    	  	            		if (type =='working'){
	    	  	            			workingRow.remove();
	    	  	            			followingRow.remove();
	    	  	            		    var tbody_1 = document.getElementById("tbody_1").innerHTML;
	    	  	            		    if(tbody_1.trim() == ""){
	    	  	            		    	document.getElementById("tbody_1").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	    	  	            		
	    	  	            		    }
	    	  	            			
	    	  	            		} 	else if(type =='comming') {
	    	  	            			comingRow.remove();
	    	  	            			followingRow.remove();
	    	  	            			 var tbody_2 = document.getElementById("tbody_2").innerHTML;
	    	  	            			if(tbody_2.trim() == ""){
	    	  	            				document.getElementById("tbody_2").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	    	  	            		    }
	    	  	            			 var tbody_3 = document.getElementById("tbody_3").innerHTML;
	    		  	            		    if(tbody_3.trim() == ""){
	    		  	            		    	document.getElementById("tbody_3").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	    		  	            		    } 
	    		  	            			
	    	  	            		}   else if(type =='follow'){
	    	  	            			followingRow.remove();
	    	  	            			comingRow.remove();
	    	  	            			 var tbody_2 = document.getElementById("tbody_2").innerHTML;
	    		  	            			if(tbody_2.trim() == ""){
	    		  	            				document.getElementById("tbody_2").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	    		  	            		    }
	    		  	            			 var tbody_3 = document.getElementById("tbody_3").innerHTML;
	    			  	            		    if(tbody_3.trim() == ""){
	    			  	            		    	document.getElementById("tbody_3").innerHTML = "<tr><td colspan='4'>Hiện vẫn chưa có sự kiện nào!</td></tr>";
	    			  	            		    } 
	    	  	            		}     		
	    	  	            		} 
	    	              		else {
	    	              				alertStr ='Chưa thể hủy theo dõi sự kiện';
	    	              			alert(alertStr);
	    	              		}
	            			}else{
	            				alert("Sự kiện này đã bị đóng");
		            			window.location.href = "Index.do";
	            			}
	       
	              	} else {
	              		window.location.href = "Index.do";
	              	}
	            	
	            	
	            },
	            error: function (data) {
	                alert("fail");
	            }
	        });
		}
		</script>
</html>
